<template>
  <div>
    <el-container>
      <el-header><Header /></el-header>
      <el-main>
        <div>
          <el-menu
            :default-active="activeIndex?activeIndex:'1'"
            class="el-menu-demo"
            mode="horizontal"
          >
            <el-menu-item style="border: none" index="1"><router-link to="/home">首页</router-link></el-menu-item>
            <el-menu-item style="border: none" index="2"><router-link to="/home/page2">最新评审动态</router-link></el-menu-item>
            <el-menu-item style="border: none" index="3"><router-link to="/home/page3">相关政策</router-link></el-menu-item>
            <el-menu-item style="border: none" index="4"><router-link to="/home/page4">评审结果公示</router-link></el-menu-item>
            <el-menu-item style="border: none" index="5"><router-link to="/home/page5">评审标准</router-link></el-menu-item>
            <el-menu-item style="border: none" index="6"><router-link to="/home/page6">业务指南</router-link></el-menu-item>
            <el-menu-item style="border: none" index="7"><router-link to="/home/page7">评审表格下载</router-link></el-menu-item>
            <el-menu-item style="border: none" index="8"><router-link to="/home/page8">证书查询</router-link></el-menu-item>
          </el-menu>
        </div>
        <div id="view">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Header from "../../../components/Header.vue";
export default {
  name: "Home",
  data() {
    return {
      activeIndex: "1"
    };
  },
  components: {
    Header
  },
  mounted(){
    sessionStorage.getItem('tagIndex') && (this.activeIndex=sessionStorage.getItem('tagIndex'))
  },
  updated() {
      this.activeIndex=sessionStorage.getItem('tagIndex')
  }
};
</script>
<style lang="less" scoped>
.el-main{
  height: 100%;
  width: 90%;
  margin:0 5%;
}
#app > div {
  height: 100%;
}
.el-header {
  padding: 0;
}
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
}
.el-menu-demo {
  border-bottom: none !important;
}
.el-menu-demo {
  li {
    transition: none;
    width: 12.5%;
    border-bottom: 1px solid rgb(201, 201, 201) !important;
    a{
      display: inline-block;
      width:100%;
      height:100%
    }
  }
  li.is-active {
    border: 1px solid rgb(201, 201, 201) !important;
    border-bottom: none !important;
  }
}
#view{
  margin-top:10px
}
</style>